<template>
  <div class="main">
    <section>
      <div class="btn-block">
        <el-button v-if="rightsButtons['add']" type="success" size="small" icon="el-icon-circle-plus" @click="showAdd" plain>新建公告</el-button>
      </div>
      <!-- 搜索栏 -->
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>

      <!-- 列表 -->
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
        </el-table-column>
        <el-table-column align="center" label="标题" prop="title" min-width="120"></el-table-column>
        <el-table-column align="center" label="开始时间" prop="startTime" min-width="120">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间" prop="endTime" min-width="120">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createdAt" min-width="120">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="showEidt(scope.row)" plain>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>

      <!-- 弹窗 -->
      <el-dialog :title="formData.id ? '编辑' : '新建'" :visible.sync="dialogVisible">
        <el-form :model="formData" ref="form" label-width="150px">
          <el-form-item label="标题：" prop="title" :rules="commonRules.notNullRule">
            <el-input v-model="formData.title" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="显示起止时间：" prop="tempDateTime" :rules="commonRules.notNullSelectRule">
            <el-date-picker
              v-model="formData.tempDateTime"
              type="datetimerange"
              placeholder="选择日期时间" 
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跳转URL：" prop="jumpUrl" :rules="commonRules.nullUrlRule">
            <el-input v-model="formData.jumpUrl" maxlength="300"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
export default {
  name: 'homeNotice',
  components: {
    searchForm
  },
  data() {
    return{
      listQuery: {
        title: '',
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 20,

        tempCreateDate: []
      },
      queryConfig: [
        { prop: 'title', type: 'input', label: '标题' },
        { prop: 'tempCreateDate', type: 'daterange', label: '创建时间' }
      ],
      listLoading: true,
      list: [],
      listTotal: 0,

      dialogVisible: false,
      btnLoading: false,
      formData: {
        title: '',
        startTime: '',
        endTime: '',
        jumpUrl: '',

        tempDateTime: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表
    fetchData() {
      const flag = this.listQuery.tempCreateDate && this.listQuery.tempCreateDate.length
      this.listQuery.startTime = flag ? (this.listQuery.tempCreateDate[0]+' 00:00:00') : ''
      this.listQuery.endTime = flag ? (this.listQuery.tempCreateDate[1]+' 23:59:59') : ''
      this.listLoading = true;
      let listQuery = {
        ...this.listQuery
      }
      delete listQuery.tempCreateDate
      this.request({
        url: '/manage-home-web/v5/notice/page',
        method: 'get',
        params: listQuery
      }).then(({data}) => {
        this.list = data.records || []
        this.listTotal = data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    // 点击搜索
    search () {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 分页-每页条数
    handleSizeChange (value) {
      this.listQuery.pageSize = value
      this.fetchData()
    },
    // 分页-指定页
    handleCurrentChange(val){
      this.listQuery.page = val
      this.fetchData()
    },
    // 新建
    showAdd() {
      this.formData = {
        title: '',
        startTime: '',
        endTime: '',
        jumpUrl: '',

        tempDateTime: []
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 编辑
    showEidt(row) {
      this.formData = {
        ...row,
        tempDateTime: [row.startTime, row.endTime]
      }
      this.dialogVisible = true
    },
    // 保存或者更新
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.formData.startTime = this.formData.tempDateTime[0]
        this.formData.endTime = this.formData.tempDateTime[1]
        console.log(this.formData)
        this.request({
          url: this.formData.id ? '/manage-home-web/v5/notice/update' : '/manage-home-web/v5/notice/create',
          method: 'post',
          data: this.formData
        }).then(res => {
          this.dialogVisible = false
          this.btnLoading = false
          this.$message.success('操作成功')
          this.fetchData()
        }).catch(e => {
          this.btnLoading = false
        })
      })
    }
  }
}
</script>